<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./练习3样式.css">
</head>
<body>
    <div class="box">
        <div class="zuo">
            <img src="./修罗.webp">
            <div class="zzc">

            </div>
        </div>
        <div class="zhong">
            <ul>
                <li><img src="./修罗.webp" alt=""></li>
                <li><img src="./刑天.webp" alt=""></li>
                <li><img src="./战神刑天.jpg" alt=""></li>
                <li><img src="./金刚.webp" alt=""></li>
                <li><img src="./飞影.webp" alt=""></li>
            </ul>
        </div>
        <div class="you">
            
        </div>
    </div>
</body>
</html>
<script>
    var imgs=document.querySelectorAll('.zhong img')
    var zimg=document.querySelector('.zuo img')
    var zzc=document.querySelector('.zzc')
    var zuo=document.querySelector('.zuo')
    var you=document.querySelector('.you')
    for(i=0;i<imgs.length;i++){
        imgs[i].onclick=function(){
            for(i=0;i<imgs.length;i++){
                imgs[i].style.border=''
            }
            this.style.border='2px solid red'
            zimg.src=this.src
        }
    }
    zimg.onmouseenter=function(){
        zzc.style.display='block'
        you.style.display='block'
    }
    zimg.onmouseleave=function(){
        zzc.style.display='none'
        you.style.display='none'
    }
    zimg.onmousemove=function(e){
        var a=e.pageX-100
        var b=e.pageY-100
        a=a<0?0:a
        b=b<0?0:b
        a=a>200?200:a
        b=b>200?200:b
        zzc.style.left=a+'px'
        zzc.style.top=b+'px'
        you.style.backgroundImage=`url(${this.src})`
        you.style.backgroundPosition=`${-2*a}px ${-2*b}px`
    }
</script>